﻿@page "/"

@using RemoteValidationWasm.Shared
@using RemoteValidationWasm.Services
@inject WeatherForecastService ForecastService

Try Inserting a record with a Date that already exists in the grid.
<br />
Try Editing a record and adding the letter "a" in the Summary.
<br />
This sample uses a Notification component to show the error message to supplement any data annotation validation in the Popup edit mode, but it can also work with other edit modes.

<TelerikGrid Data="@forecasts" Height="550px" Sortable="true" Pageable="true" PageSize="20"
                OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" EditMode="@GridEditMode.Popup">
    <GridColumns>
        <GridColumn Field="Id" Title="Id" Width="100px" Editable="false" Groupable="false" />
        <GridColumn Field="Date" DisplayFormat="{0:dddd, dd MMM yyyy}" />
        <GridColumn Field="TemperatureC" Title="Temp. C" DisplayFormat="{0:N1}" />
        <GridColumn Field="TemperatureF" Title="Temp. F" DisplayFormat="{0:N1}" />
        <GridColumn Field="Summary" />
        <GridCommandColumn Width="200px" Resizable="false">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit" Primary="true">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="plus" Primary="true">Add Forecast</GridCommandButton>
    </GridToolBar>
</TelerikGrid>

<TelerikNotification @ref="@Notification"
                     HorizontalPosition="@NotificationHorizontalPosition.Center"
                     VerticalPosition="@NotificationVerticalPosition.Top"
                     Class="big-notification">
</TelerikNotification>


@code {
    List<WeatherForecast> forecasts { get; set; }
    bool errorExists { get; set; }
    TelerikNotification Notification { get; set; }

    void ShowErrorNotification(string message)
    {
        Notification.Show(new NotificationModel { CloseAfter = 0, Text = message, ThemeColor = Telerik.Blazor.ThemeColors.Error });
    }

    protected override async Task OnInitializedAsync()
    {
        await GetForecasts();
    }

    async Task GetForecasts()
    {
        forecasts = await ForecastService.GetForecastListAsync(DateTime.Now);
    }

    // sample error handling for the CUD operations - in this sample through simplistic error messsages coming from the server

    public async Task DeleteHandler(GridCommandEventArgs args)
    {
        WeatherForecast currItem = args.Item as WeatherForecast;

        try
        {
            await ForecastService.DeleteForecastAsync(currItem);
            // update the view data
            forecasts.Remove(currItem);
        }
        catch (Exception ex)
        {
            // show information to the user
            ShowErrorNotification(ex.Message);
        }
    }

    public async Task CreateHandler(GridCommandEventArgs args)
    {
        WeatherForecast currItem = args.Item as WeatherForecast;

        try
        {
            // get the inserted data from the server in case it alters it further (e.g., provides an ID)
            WeatherForecast insertedForecast = await ForecastService.InsertForecastAsync(currItem);
            // update the view data
            forecasts.Insert(0, insertedForecast);
        }
        catch (Exception ex)
        {
            // keep the grid in insert mode
            args.IsCancelled = true;
            // show information to the user
            ShowErrorNotification(ex.Message);
        }
    }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        WeatherForecast currItem = args.Item as WeatherForecast;

        try
        {
            // get the inserted data from the server in case it alters it further
            WeatherForecast updatedForecast = await ForecastService.UpdateForecastAsync(currItem);
            // update the view data
            var index = forecasts.FindIndex(i => i.Id == updatedForecast.Id);
            if (index != -1)
            {
                forecasts[index] = updatedForecast;
            }
        }
        catch (Exception ex)
        {
            // keep the grid in edit mode
            args.IsCancelled = true;
            // show information to the user
            ShowErrorNotification(ex.Message);
        }
    }
}

<style>
    .big-notification .k-notification-container .k-notification-wrap {
        width: 350px;
        height: 100px;
        align-items: center;
        font-size: 32px;
    }

        .big-notification .k-notification-container .k-notification-wrap .k-icon.k-i-error::before {
            font-size: 32px;
        }

    .big-notification {
        z-index: 654321;
    }
</style>